<template>
	<view>
		<view class="header">
			<image  src="./back.png" mode="" @click="back"></image>
			<span>草稿箱</span>
			<span></span>
		</view>
		<view class="kb"></view>
		<view class="contain">
			<view class="first" v-for="item in data" :key='item.id'>
				<view class="first-top">
					<view class="first-top-left">
						<span class='first-one'>{{item.title}}</span>
						<span class='first-two'>{{item.neirong}}</span>
					</view>
					<view class="first-top-right">
						<image class="first-top-right-img" :src='item.img' mode=""></image>
					</view>
				</view>
				<view class="first-but">
					<span>{{item.time}}</span>
					<image :src="item.sc" mode="" @click="open"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[
					{id:1,title:"跑步人的一天",neirong:"大神大神大所大所大大所多大所大所大哇无多群无多群无多群无多群无多群无多群无多群无多群无多群无多",
					img:require('./bg.png'),time:'2022-12-12 10:00',sc:require('./more.png')},
					{id:2,title:"跑步人的二天",neirong:"大所大所无多群无多群无多群大哇无多群无多群无多群无大神大神大所大所大大所多多群无多群无多群无多",
					img:require('./bg.png'),time:'2023-12-12 10:00',sc:require('./more.png')},
				]
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			open(){
				   uni.showActionSheet({
				   	itemList: ['删除'],
				       // 字体颜色
				   	itemColor: "#55aaff",
				   	success (res) {
				   	   // 选择其中任意一项后，获取其索引（res.tapIndex），从0开始
				   	   console.log(res.tapIndex) 
				   	},
				   	fail (res) {
				   	   // 取消后的操作
				   	}
				   })
			}
		}
	}
</script>

<style lang="scss">
.header{
	width: 750rpx;
	height: 160rpx;
	position: fixed;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 20rpx;
	font-size: 36rpx;
	z-index: 10;
	background-color: #FFFFFF;
	text-align: center;
	image{
		width: 30rpx;
		height: 48rpx;
	}
	span{
		color: #181818;
		font-size: 36rpx;
	}
}
.kb{
	width: 750rpx;
	height: 200rpx;
}
.contain{
	width: 750rpx;
	height: 300rpx;
	// border: 1rpx solid red;
	padding: 0 20rpx;
	.first{
		width: 730rpx;
		height: 100%;
			margin-bottom: 40rpx;
		// border: 1px solid blue;
		
	}
	.first-top{
		width: 700rpx;
		height: 180rpx;
		// border: 1rpx solid #FF6262;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		.first-top-right{
			width: 292rpx;
			height: 180rpx;
			// border: 1px solid red;
			.first-top-right-img{
				width: 292rpx;
				height: 180rpx;
			}
		}
		.first-top-left{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				flex-wrap: wrap;
				width: 360rpx;
				// height: 100%;
				// border: 1rpx solid red;
				.first-one{
					color: #333333 ;
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
				.first-two{
					font-size: 28rpx;
					color: #434343;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 20rpx;
				}
				
		}
	}
	.first-but{
		width: 700rpx;
		height: 120rpx;
		// background-color: #007AFF;
		border-bottom: 1rpx solid #D2D2D2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #ACACAC;
		font-size: 24rpx;
	
		image{
			width: 40rpx;
			height: 22rpx;
		}
	}
}
</style>
